<template>
	<view :data-theme="theme">
		<view class='my-account'>
			<view class='wrapper'>
				<view class='header'>
					<view class='assets'>
						<view class='money'>{{statistics.nowMoney || 0.00}}</view>
						<view>账户余额(元)</view>
					</view>
					<view style="margin: auto;">
						<view class="draw" @click="drawBool=true">去提现</view>
					</view>
				</view>
			</view>
			<view class="data">
				<view class="title">金额数据展示（元）</view>
				<view class="item" v-if="amountShows[0]">
					<view class="itemTitle">
						<view class="box" style="background-color: #F5AC4B;"></view>
						<view>
							公排回馈金额
							<!-- <icon class="t-icon t-icon-back2"></icon> -->
						</view>
					</view>
					<view class="count">
						<view>
							<view>{{sortAll}}</view>
							<view class="tips" @click="goToInfo('公排回馈总额')">
								公排回馈总额
								<icon class="t-icon t-icon-back2"></icon>
							</view>
						</view>
						<view>
							<view>{{sortMonth}}</view>
							<view class="tips" @click="goToInfo('本月公排回馈额')">
								本月公排回馈额
								<icon class="t-icon t-icon-back2"></icon>
							</view>
						</view>
					</view>
				</view>
				<view class="item" v-if="amountShows[1]">
					<view class="itemTitle">
						<view class="box" style="background-color: #4484FF;"></view>
						<view>
							推广金额
							<!-- <icon class="t-icon t-icon-back2"></icon> -->
						</view>
					</view>
					<view class="count">
						<view>
							<view>{{proAll}}</view>
							<view class="tips" @click="goToInfo('推广金额')">
								推广金额
								<icon class="t-icon t-icon-back2"></icon>
							</view>
						</view>
						<view>
							<view>{{proMonth}}</view>
							<view class="tips" @click="goToInfo('本月推广佣金')">
								本月推广佣金
								<icon class="t-icon t-icon-back2"></icon>
							</view>
						</view>
					</view>
				</view>
				<view class="item" v-if="amountShows[2]">
					<view class="itemTitle">
						<view class="box" style="background-color: #FF5050;"></view>
						<view>
							销售金额
							<!-- <icon class="t-icon t-icon-back2" ></icon> -->
						</view>
					</view>
					<view class="count">
						<view>
							<view>{{sellAll}}</view>
							<view class="tips" @click="goToInfo('销售金额')">
								销售总额  
								<icon class="t-icon t-icon-back2"></icon>
							</view>
						</view>
						<view>
							<view>{{sellMonth}}</view>
							<view class="tips" @click="goToInfo('本月销售总额')">
								本月销售总额
								<icon class="t-icon t-icon-back2"></icon>
							</view>
						</view>
					</view>
				</view>
				<view class="item" v-if="amountShows[3]">
					<view class="itemTitle">
						<view class="box" style="background-color: #FF5050;"></view>
						<view>
							中心收益
							<!-- <icon class="t-icon t-icon-back2"></icon> -->
						</view>
					</view>
					<view class="count">
						<view>
							<view>{{serviceAll}}</view>
							<view class="tips" @click="goToInfo('中心总收益')">
								中心总收益  
								<icon class="t-icon t-icon-back2"></icon>
							</view>
						</view>
						<view>
							<view>{{serviceMonth}}</view>
							<view class="tips" @click="goToInfo('本月中心收益')">
								本月中心收益
								<icon class="t-icon t-icon-back2"></icon>
							</view>
						</view>
					</view>
				</view>
				<view class="item" v-if="amountShows[4]">
					<view class="itemTitle">
						<view class="box" style="background-color: #FF5050;"></view>
						<view>
							大区收益
							<!-- <icon class="t-icon t-icon-back2"></icon> -->
						</view>
					</view>
					<view class="count">
						<view>
							<view>{{regionAll}}</view>
							<view class="tips" @click="goToInfo('大区总收益')">
								大区总收益  
								<icon class="t-icon t-icon-back2"></icon>
							</view>
						</view>
						<view>
							<view>{{regionMonth}}</view>
							<view class="tips" @click="goToInfo('本月大区收益')">
								本月大区收益
								<icon class="t-icon t-icon-back2"></icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="rule">
				<view class="title">余额说明</view>
				<view class="tip">1、推广佣金：</view>
				<view>老用户通过分享“我的邀请码“邀请新用户注册，老用户获得新用户线上线下每笔消费订单金额的0.3%的推广佣金；如新用户入驻商家后，老用户获得新用户即该商家线上线下每笔收款金额的0.5%的推广佣金；如新用户成为日夜购服务中心，老用户同时获得新用户即该服务中心中心收益的0.05%的推广佣金。</view>
				<view class="tip">2、特别说明：</view>
				<view>账户余额以及明细金额精确到人民币分，不足1分以1分显示，实际计算以具体金额为准。</view>
			</view>
		</view>
		
		<view v-if="drawBool" :disabled="payShow">
			<view class="staorder-overlay" @click="drawBool=false"></view>
			<view class="content">
				<view>提现金额</view>
				<view class="money">
					<view>￥</view>
					<input class="number" type="number" v-model="amount" />
					<view class="allBtn" @click="allAmount()">全部提现</view>
				</view>
				<view class="drawEnd">
					<view style="flex: 1;">提现至</view>
					<picker mode="selector" :range="transItem" :value="transIndex" range-key="name" @change="bindChange">
						<view style="padding: 20rpx;background-color: white;">{{ transItem[transIndex].name }}</view>
					</picker>
					<view class="iconfont icon-xiangyou"></view>
				</view>
				<view class="btn" @click="sureDraw()">确认提现</view>
				<view class="mark">
					*温馨提示：<br/>
					1、每次提现金额不低于1.00元 <br/>
					2、用户提现到银行卡T+1日到账，手续费如下： <br/>
					2.1：1万元以下（含1万元），每笔收费5元； <br/>
					2.2：1万元至10万元（含10万元），每笔收费10元；<br/>
					2.3：10万元至50万元（含50万元），每笔收费15元； <br/>
					2.4：50万元至100万元（含100万元），每笔收费20元； <br/>
					2.5：100万元以上，每笔按提现金额的0.002%收取；<br/>
				</view>
			</view>
		</view>
		
		<view v-if="payShow">
			<view class="staorder-overlay2"></view>
			<view class="payContent">
				<text class="t-icon t-icon-guanbi1 iconfont" @click="closePay()"></text>
				<view class="infoShow">
					<view style="margin-bottom: 60rpx;">请输入支付密码</view>
					<view>提现</view>
					<view class="money">￥{{amount}}</view>
					<view class="commission">
						<view>手续费</view>
						<view>￥{{commission}}</view>
					</view>
					<view class="pass">
						<input :class="{'bor':payIndex==0}" type="number" maxlength="1" v-model="payPass1" password disabled />
						<input :class="{'bor':payIndex==1}" type="number" maxlength="1" v-model="payPass2" password disabled />
						<input :class="{'bor':payIndex==2}" type="number" maxlength="1" v-model="payPass3" password disabled />
						<input :class="{'bor':payIndex==3}" type="number" maxlength="1" v-model="payPass4" password disabled />
						<input :class="{'bor':payIndex==4}" type="number" maxlength="1" v-model="payPass5" password disabled />
						<input :class="{'bor':payIndex==5}" type="number" maxlength="1" v-model="payPass6" password disabled />
					</view>
				</view>
				<view class="keyWord">
					<view @click="inputPass('1')">1</view>
					<view @click="inputPass('2')">2</view>
					<view @click="inputPass('3')">3</view>
					<view @click="inputPass('4')">4</view>
					<view @click="inputPass('5')">5</view>
					<view @click="inputPass('6')">6</view>
					<view @click="inputPass('7')">7</view>
					<view @click="inputPass('8')">8</view>
					<view @click="inputPass('9')">9</view>
					<view style="background-color: transparent;"></view>
					<view @click="inputPass('0')">0</view>
					<view style="background-color: transparent;" @click="inputPass('')">×</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2023 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		getMyAccountApi,
		getMyAccountDetailApi,
		getMyAccountWithdraw
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	let app = getApp();
	export default {
		components: {
			
		},
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				statistics: {},
				sortAll: 0,
				sortMonth: 0,
				proAll: 0,
				proMonth: 0,
				sellAll: 0,
				sellMonth: 0,
				serviceAll: 0,
				serviceMonth: 0,
				regionAll: 0,
				regionMonth: 0,
				amountShows: [false, false, false, false, false],
				merchantData: this.$Cache.get('applyInfo')?JSON.parse(this.$Cache.get('applyInfo')):[],
				drawBool: false,	//提现弹窗
				amount: 0,			//提现金额
				commission: 0,		//手续费
				payShow: false,		//支付密码弹窗
				payPass1: '',		//支付密码
				payPass2: '',
				payPass3: '',
				payPass4: '',
				payPass5: '',
				payPass6: '',
				payIndex: 0,		//索引
				transType: 3,		//提现方式：1-微信；2-支付宝；3-银行卡
				transItem: [],
				transIndex: 0,
				theme: app.globalData.theme,
			};
		},
		computed: mapGetters(['isLogin', 'userInfo']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.userDalance();
						this.userDalanceDetail();
					}
				},
				deep: true
			}
		},
		onLoad() {
			if (this.isLogin) {
				this.initData();
				this.userDalance();
				this.userDalanceDetail();
			} else {
				toLogin();
			}
		},
		methods: {
			initData() {
				let items = [
					{
						name: this.merchantData.bank+'('+this.merchantData.stlAccNo.substr(this.merchantData.stlAccNo.length-4,this.merchantData.stlAccNo.length)+')',
						value: 3
					},
					{
						name: '支付宝',
						value: 2
					}
				];
				this.transItem = items;
			},
			bindChange: function (e) {
				const index = e.detail.value;
				this.transIndex = index;
				this.transType = this.transItem[index].value;
			},
			userDalance() {
				getMyAccountApi().then(res => {
					this.statistics = res.data;
				});
			},
			userDalanceDetail() {
				let that = this;
				getMyAccountDetailApi().then(res => {
					let data = res.data;
					if(data!=null&&data.length>0){
						for(let i=0;i<data.length;i++){
							if(data[i].title=='公排回馈总额'){
								that.sortAll = data[i].amount;
								that.amountShows[0] = true;
							}
							if(data[i].title=='本月公排回馈额'){
								that.sortMonth = data[i].amount;
							}
							if(data[i].title=='推广佣金'){
								that.proAll = data[i].amount;
								that.amountShows[1] = true;
							}
							if(data[i].title=='本月推广佣金'){
								that.proMonth = data[i].amount;
							}
							if(data[i].title=='销售总额'){
								that.sellAll = data[i].amount;
								that.amountShows[2] = true;
							}
							if(data[i].title=='本月销售总额'){
								that.sellMonth = data[i].amount;
							}
							if(data[i].title=='中心收益'){
								that.serviceAll = data[i].amount;
								that.amountShows[3] = true;
							}
							if(data[i].title=='本月中心收益'){
								that.serviceMonth = data[i].amount;
							}
							if(data[i].title=='大区收益'){
								that.regionAll = data[i].amount;
								that.amountShows[4] = true;
							}
							if(data[i].title=='本月大区收益'){
								that.sellMonth = data[i].amount;
							}
						}
					}
				});
			},
			allAmount(){
				this.amount = this.statistics.nowMoney || 0.00;
			},
			sureDraw(){		
				let that = this;
				
				let inputNumber = that.amount-0.00;	//输入金额
				let allMoney = that.statistics.nowMoney-0.00;	//余额
				
				if(inputNumber > 1.00){
					if(inputNumber < allMoney){
						if(that.transType==3){
							//手续费计算
							that.commission = inputNumber <= 10000.00 ? 5 : inputNumber <= 100000.00 ? 10 : inputNumber <= 500000.00 ? 15 : inputNumber <= 1000000.00 ? 20 : inputNumber*0.00002;
							
							if(allMoney>(inputNumber + that.commission)){
								this.payShow = true;
							}else{
								that.$util.Tips({
									title: this.$t(`提现金额大于余额(含手续费)`)
								});
							}
						}else{
							this.payShow = true;
						}
					}else{
						that.$util.Tips({
							title: this.$t(`提现金额大于余额`)
						});
					}
				}else{
					that.$util.Tips({
						title: this.$t(`提现金额需大于1.00元`)
					});
				}
			},
			inputPass(e) {
				let that = this;
				
				if(e==''){//回退
					if(that.payIndex>0){
						that.payIndex--;
						if(that.payIndex==0){
							that.payPass1 = e;
						}else if(that.payIndex==1){
							that.payPass2 = e;
						}else if(that.payIndex==2){
							that.payPass3 = e;
						}else if(that.payIndex==3){
							that.payPass4 = e;
						}else if(that.payIndex==4){
							that.payPass5 = e;
						}else if(that.payIndex==5){
							that.payPass6 = e;
						}
					}
				}else{
					if(that.payIndex==0){
						that.payPass1 = e;
					}else if(that.payIndex==1){
						that.payPass2 = e;
					}else if(that.payIndex==2){
						that.payPass3 = e;
					}else if(that.payIndex==3){
						that.payPass4 = e;
					}else if(that.payIndex==4){
						that.payPass5 = e;
					}else if(that.payIndex==5){
						that.payPass6 = e;
					}
					that.payIndex++;
					
					if(that.payIndex==6){//输入完成
						//记录密码
						let pass = '' + that.payPass1 + that.payPass2 + that.payPass3 + that.payPass4 + that.payPass5 + that.payPass6;

						uni.showLoading({
							title: '提现中...'
						});
						
						getMyAccountWithdraw({transType: that.transType, amount: that.amount, payPassword: pass}).then(res =>{
							if(res.data!=null){
								//关闭弹窗
								that.payShow = false;
								that.drawBool = false;
								uni.hideLoading();
								
								that.userDalance();
								uni.showToast({
									title: '提现成功',
									icon: 'success',
									duration: 2000
								});
							}else{
								uni.hideLoading();
								that.payIndex = 0;
								that.payPass1 = '';
								that.payPass2 = '';
								that.payPass3 = '';
								that.payPass4 = '';
								that.payPass5 = '';
								that.payPass6 = '';
							}
							
						});
					}
				}
			},
			closePay() {
				let that = this;
				that.payShow=false;
				that.payIndex = 0;
				that.payPass1 = '';
				that.payPass2 = '';
				that.payPass3 = '';
				that.payPass4 = '';
				that.payPass5 = '';
				that.payPass6 = '';
			},
			goToInfo(str) {
				uni.navigateTo({
					url: '/pages/users/my_balance/my_balance?title=' + str
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-account{
		background-color: #F8FBFF;
		padding: 0 0 40rpx 0;
		
		.wrapper{
			background-color: #fff;
			padding: 22rpx 32rpx;
			
			.header{
				background-image: linear-gradient(to top right, #F8D47B, #EFBA4E);
				border-radius: 40rpx;
				display: flex;
				color: #9F6208;
				padding: 80rpx 0 80rpx 32rpx;
				font-family: 'PingFang HK-Regular, PingFang HK';
				
				.assets{
					flex: 1;
					font-size: 32rpx;
					
					.money{
						font-size: 60rpx;
						font-weight: 600;
						margin-bottom: 20rpx;
					}
				}
				
				.draw{
					background-color: #F7A231;
					padding: 26rpx 62rpx 26rpx 32rpx;
					border-radius: 50rpx 0 0 50rpx;
					color: #fff;
					font-size: 30rpx;
					font-weight: 500;
				}
			}
		}
		
		.data{
			color: #343643;
			font-weight: 500;
			font-family: 'PingFang TC-Medium, PingFang TC';
			padding: 20rpx 32rpx;
			
			.title{
				font-size: 30rpx;
				font-weight: bold;
				margin: 20rpx 0;
			}
			
			.item{
				background-color: #fff;
				border-radius: 28rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;
				
				.itemTitle{
					display: flex;
					font-size: 26rpx;
					font-weight: bold;
					align-items: center;
					
					.box{
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
						border-radius: 4rpx;
					}
				}
				
				.count{
					font-size: 40rpx;
					font-weight: bold;
					display: flex;
					margin-top: 30rpx;
					
					view{
						flex: 1;
						text-align: center;
					}
					
					.tips{
						color: #6F7C85;
						font-size: 26rpx;
						line-height: 26rpx;
						font-weight: 400;
						
						.t-icon{
							position: absolute;
						}
					}
				}
				
			}
		}
		
		.rule{
			background-color: #fff;
			font-size: 22rpx;
			color: #6F7C85;
			padding: 20rpx 32rpx;
			margin: 20rpx 32rpx;
			border: 28rpx;
			
			.title{
				font-size: 24rpx;
				color: #343643;
				text-align: center;
			}
			
			.tip{
				color: #6F7C85;
				margin-top: 10rpx;
				margin-bottom: 10rpx;
			}
		}
	}
	
	.staorder-overlay{
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 13;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: 0.4;
	}
	.content{
		display: flex;
		flex-direction: column;
		width: 100vw;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		z-index: 23 !important;
		background: #fff !important;
		opacity: 1 !important;
		padding: 60rpx 32rpx;
		color: #343643;
		font-size: 28rpx;
		border-radius: 40rpx 40rpx 0 0;
		
		.money{
			font-size: 50rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			margin: 40rpx 0;
			border-bottom: 1px solid #979797;
			
			.number{
				font-size: 50rpx;
			}
			
			input{
				flex: 1;
			}
			
			.allBtn{
				color: #2194FF;
				font-size: 28rpx;
			}
		}
		
		.drawEnd{
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			
			.bank{
				flex: 1;
				text-align: right;
			}
		}
		
		.btn{
			background-color: #F7A231;
			padding: 26rpx 0;
			color: #fff;
			text-align: center;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
		}
		
		.mark{
			font-size: 22rpx;
			color: #979797;
			line-height: 1.9em;
		}
	}
	
	.staorder-overlay2{
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 33;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: 0.6;
	}
	
	.payContent{
		display: flex;
		flex-direction: column;
		width: 100vw;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		z-index: 43 !important;
		opacity: 1 !important;
		
		.iconfont{
			position: absolute;
			right: 40px;
			top: 15px;
		}
		
		.infoShow{
			background: #fff !important;
			text-align: center;
			font-size: 32rpx;
			color: #343643;
			margin: 0 60rpx 132rpx 60rpx;
			padding: 60rpx 36rpx;
			border-radius: 16rpx;
			
			.money{
				font-size: 48rpx;
				font-weight: bold;
				margin-bottom: 82rpx;
			}
			
			.commission{
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				color: #80818D;
			}
			
			.pass{
				display: flex;
				justify-content: center;
				margin-top: 40rpx;
				
				input{
					width: 88rpx;
					height: 80rpx;
					background-color: #E8E8E8;
					border-radius: 8rpx;
					margin: 0 10rpx;
				}
				
				.bor{
					border: 1rpx solid #F7A231;
				}
				
			}
		}
		
		.keyWord{
			background: #E8E8E8 !important;
			display: grid;
			justify-content: center;
			grid-template-rows: repeat(3, 35px);
			grid-template-columns: repeat(3, 90px);
			grid-gap: 10rpx;
			padding-top: 20rpx;
			padding-bottom: 40rpx;
			text-align: center;
			line-height: 35px;
			font-size: 40rpx;
			font-weight: 600;
			
			view{
				background: #fff ;
				border-radius: 16rpx;
				height: 35px;
			}
		}
		
	}
</style>
